<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo11-深入组件-prop</title>
</head>
<script src="../libs/vue.js"></script>
<body> 
    <div id="app"> 
      <div>

        <button-counter-shared :count="1" :author="{a01:'aa001',b01:'bb002'}"></button-counter-shared> 
      </div> 
    </div>
</body>
<script>
Vue.config.productionTip = false;

/**
 * Vue是单向数据流，数据流向为父->子传递，反之不直接支持
 * 
 * https://cn.vuejs.org/v2/guide/components-props.html
 * 
 * 子组件想要修改 父组件给入参数的prop值，给出了2个方案，详情看官网文章，即上文。
 */ 
Vue.component('button-counter-shared', {
  props:{
    count: Number ,
    author: Object 
  },
  template: `<div><button v-on:click="docount">You clicked me {{ selfcnt }} times.</button>
    <hr><br>
    <div>
      <span>{{author}} - {{ author.a01 }}</span>
      <button @click="showObj">显示并修改父组件入参引用</button>
      
    </div>
    </div>`,
  data:function(){
    return {
      selfcnt: this.count ,
    }
  }, 
  methods:{
    docount:function(){
        this.selfcnt++;
    },
    showObj: function(){
      console.log(this.author);
      /**
       * 这个案例验证了，在子组件中修改父组件prop引用值 是不会生效的
       */ 
      // this.author.a01 = Math.random();
      this.author.a01 = 'asdfasdfasdf';


    }
  }
});

var app = new Vue({
  el: '#app'
});

</script>
</html>